<template>
	<view>
		<Header :showBack="false" title="我的" bgColor="#ace8f6"></Header>

		<view class="top-box">
			<view @click="registPop" class="top">
				<view>
					<image src="@/static/avatar.png" mode="aspectFill"></image>
				</view>
				<view  @longpress="getLog" >
					<view>{{name || '用户'}}</view>
					<view v-if="!token" style="color: #666;font-size: 24rpx;margin-top: 10rpx;">绑定手机号</view>
					<view v-else style="color: #666;font-size: 24rpx;margin-top: 10rpx;">余额: {{balance || 0}} 元</view>
					<!-- <open-data type="userNickName"></open-data> -->
				</view>
				<view class="line-box"></view>
			</view>
		</view>
		<view class="order-list">
			<view class="item" @click="toMyOrder(0)">
				<view class="left">
					<image src="@/static/img/daizhifu.png" mode=""></image>
					<view>消费记录</view>
				</view>
				<view class="right"><image src="@/static/img/go.png" mode=""></image></view>
			</view>
			<view class="item" @click="toRecharge">
				<view class="left">
					<image src="@/static/img/tuikuan.png" mode=""></image>
					<view>立即充值</view>
				</view>
				<view class="right"><image src="@/static/img/go.png" mode=""></image></view>
			</view>
			<view class="item" @click="toRechargeRecord">
				<view class="left">
					<image src="@/static/img/daiquhuo.png" mode=""></image>
					<view>充值记录</view>
				</view>
				<view class="right"><image src="@/static/img/go.png" mode=""></image></view>
			</view>
		</view>
		
		<registPop ref="registPop"></registPop>
		<uni-popup ref="paramsRef">
			<view style="height: 500rpx;background-color: #fff;padding: 0 15rpx;">
				<scroll-view scroll-y="true" style="height: 500rpx;width: 690rpx;">
					<view >
						<text selectable="true"  user-select >{{log}}</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	var WXBizDataCrypt = require('@/utils/RdWXBizDataCrypt.js');
	import config from "@/config.js"
	import commonMinxi from "@/commom/commonMixin.js"
	import registPop from "@/component/registPop"
	import { decryptPhone } from "@/services/phoneDecryption.js"

	export default {
		data() {
			return {
				name: uni.getStorageSync('info').ownerName,
				balance: uni.getStorageSync('info').amount,
				userId: uni.getStorageSync('info').id,
				daifahuoNum: 0,
				yipeisongNum: 0,
				daizhifuNum: 0,
				agree: false,
				newUser: uni.getStorageSync("newUser"),
				appId: getApp().globalData.appId,
				sessionkey: uni.getStorageSync('sk'),
				log:""
			}
		},
		mixins: [commonMinxi],
		components: {
			registPop
		},
		onShow() {
			this.getMemberInfo()
		},
		mounted() {
			this.name = uni.getStorageSync('info').ownerName;
			this.balance = uni.getStorageSync('info').amount;
			this.userId = uni.getStorageSync('info').id;
		},
		methods: {
			getMemberInfo() {
				this.$http('/minprogram/api/member/getOwnerMemberCardList',{
					condition: {dataTypeFlag: ""}
				},async (res) => {
					if (res.data.items.length>0) {
						let list = res.data.items[0];
						let ownerName = await decryptPhone(list.ownerName,this)
						this.name = ownerName;
						this.balance = list.amount;
						this.userId = list.id;
					}
				},'POST',err=>{
					console.log(err)
				})
			},
			getNum(list, status) {
				return list.filter(col => col.orderStatus == status).reduce((prev, cur) => {
					return cur.totalQuantity + prev
				}, 0)
			},
			getStatusNum() {
				let data = {
					"condition": {
						"orderStatus": ''
					},
					"pageNum": 1,
					"pageSize": 999
				}
				this.$http('/member/api/mall/getOwnerMallOrderList', data, res => {
					console.log(res.data.items)
					this.daifahuoNum = this.getNum(res.data.items, 0)
					this.daizhifuNum = this.getNum(res.data.items, -1)
				})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync('info').organizationPhone || '073185210591'
				});
			},
			toOrder(index) {
				this.validationLogin({
					success: () => {
						uni.navigateTo({
							url: '/pages/shopMall/order?index=' + index
						})
					},
					regist: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
					scan: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})
			},
			toMyOrder(index) {
				this.validationLogin({
					success: () => {
						uni.navigateTo({
							url: '/pages/consumption/consumption?index=' + index
						})
					},
					regist: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
					scan: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
				})
			},
			toRechargeRecord(){
				this.validationLogin({
					success: () => {
						uni.navigateTo({
							url: '/pages/rechargeRecord/rechargeRecord'
						})
					},
					regist: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
					scan: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
				})
			},
			toRecharge(){
				this.validationLogin({
					success: () => {
						uni.navigateTo({
							url: `/pages/recharge/recharge?id=${this.userId}`
						})
					},
					regist: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
					scan: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
				})
			},
			toMyTaste() {
				this.validationLogin({
					success: () => {
						uni.navigateTo({
							url: '/pages/myOrder/tasteOrder?index=0'
						})
					},
					regist: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
					scan: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})

			},
			toCoupon() {
				this.validationLogin({
					success: () => {
						uni.navigateTo({
							url: '/pages/coupon/coupon'
						})
					},
					regist: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
					scan: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})
			},
			registPop() {
				this.validationLogin({
					regist: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
					scan: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})
			},
			changeCheckbox(e) {
				console.log("this.agree: ", e);
				this.agree = e.detail.value.length > 0 ? true : false
			},
			getLog(){
				let log = uni.getStorageSync("w_log");
				this.log = log
				this.$refs.paramsRef.open()
			}
		}
	}
</script>

<style scoped lang="less">
	.tongyong() {
		background-color: #FFFFFF;
		width: 710upx;
		margin: 20upx;
		border-radius: 4upx;
	}

	.top-box {

		.top {
			width: 100%;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			height: 150upx;

			position: relative;

			>view:first-child {
				width: 100upx;
				height: 100upx;
				border-radius: 50rpx;
				margin: 0 30upx;

				image {
					width: 100upx;
					height: 100upx;
					border-radius: 50rpx;
				}
			}

			.line-box {
				width: 690rpx;
				position: absolute;
				bottom: 0;
				left: 30rpx;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			}

		}

		.info-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			display: flex;

			.info-box-line {
				width: 1px;
				height: 48rpx;
				background-color: rgba(0, 0, 0, 0.2);
			}

			.info-box-item {
				flex: 1;
				height: 134rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				text {
					&:last-child {
						margin-top: 6rpx;
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}

	}


	.order {
		.tongyong;
		border-radius: 23rpx;

		>view:first-child {
			padding: 40upx 30upx 0;
			display: flex;
			justify-content: space-between;
			height: 50upx;
			line-height: 50upx;

			>view:first-child {
				font-weight: 500;
				font-size: 32upx;
			}

			>view:last-child {
				font-weight: 300;
				font-size: 26upx;
				color: #888888;
				display: flex;
				align-items: center;

				>image {
					width: 26upx;
					height: 26upx;
				}
			}
		}

		>view:last-child {
			display: flex;
			margin-top: 50upx;
			padding-bottom: 40upx;

			>view {
				width: 25%;
				text-align: center;

				>image {
					width: 50upx;
					height: 50upx;
					margin-bottom: 10upx;
				}

				>view {
					font-size: 26upx;
					color: #666666;
				}
			}
		}
	}

	.mune {
		.tongyong;
		border-radius: 23rpx;
		display: flex;
		padding: 50upx 0;

		>view {
			width: 25%;
			text-align: center;

			>image {
				width: 50upx;
				height: 50upx;
				margin-bottom: 10upx;
			}

			>view {
				font-size: 26upx;
				color: #666666;
			}
		}
	}

	.relative-box {
		position: relative;

		.position-box {
			position: absolute;
			width: 40upx;
			height: 40upx;
			line-height: 40upx;
			border-radius: 50%;
			background: #DD524D;
			font-size: 22upx !important;
			color: #fff !important;
			right: 40upx;
			top: -14upx;
		}
	}

	.order-list{
		background: #fff;
		border-radius: 24rpx;
		width: 710rpx;
		margin: 20rpx;
		padding: 20rpx 30rpx;
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			.left{
				display: flex;
				align-items: center;
				image{
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}
			.right{
				display: flex;
				align-items: center;
				image{
					width: 26rpx;
					height: 26rpx;
				}
			}
		}
	}
	
</style>